{include file="public/header"/}
<link href="/public/static/admin/css/app.5198ede9baa0ef042afba241bd929140.css" rel="stylesheet">

<link rel="stylesheet" href="/public/static/admin/css/swiper.min.css" />
<script type="text/javascript" src="/public/static/admin/js/swiper.jquery.min.js"></script>
<script type="text/javascript" src="/public/static/admin/js/echarts.js"></script>

<!-- <script type="text/javascript" src="/public/static/admin/js/app1.be406f6cef98b08b86ce.js"></script> -->
<style type="text/css">
	.home-goodsMsg .home-goodsMsg-wrap li {
		cursor: pointer;
		border-radius: 6px;
		overflow: hidden;
	}

	.home-goodsMsg .home-goodsMsg-wrap li .name {
		padding: 10px;
		line-height: 34px;
		border-bottom-right-radius: 4px;
		color: #fff;
		font-size: 14px;
		background-color: rgba(255, 255, 255, 0.18);
	}

	.home-goodsMsg .home-goodsMsg-wrap li:hover .name {
		background-color: rgba(255, 255, 255, 0);
	}

	.home-goodsMsg .home-goodsMsg-wrap li .number {
		font-size: 45px;
		text-align: center;
		color: #fff;
	}

	.home-goodsMsg .swiper-button-next {
		color: #fff;
		opacity: .2;
		-moz-opacity: .2;
		-khtml-opacity: .2;
		filter: alpha(opacity=20);
		padding: 15px 2px;
		background: #000;
		border-radius: 4px;
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-top: -35px;
	}

	.home-goodsMsg .swiper-button-prev {
		color: #fff;
		opacity: .2;
		-moz-opacity: .2;
		-khtml-opacity: .2;
		filter: alpha(opacity=20);
		padding: 15px 2px;
		background: #000;
		border-radius: 4px;
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-top: -35px;
	}

	.home-goodsMsg .swiper-button-next .iconss {
		width: 20px;
		align-items: center;
		margin: auto;
	}

	.home-goodsMsg .swiper-button-prev .iconss {
		width: 20px;
		align-items: center;
		margin: auto;
	}

	.home-goodsMsg .swiper-button-prev.swiper-button-disabled {
		display: none;
	}

	.home-goodsMsg .swiper-button-next.swiper-button-disabled {
		display: none;
	}

	.itemWrap .index1 {
		background: url(/public/static/admin/icon/ranking_icon1.png) no-repeat 50%;
	}

	.itemWrap .index2 {
		background: url(/public/static/admin/icon/ranking_icon2.png) no-repeat 50%;
	}

	.itemWrap .index3 {
		background: url(/public/static/admin/icon/ranking_icon3.png) no-repeat 50%;
	}
</style>

<div class="home cf">
	<div class="home-main-item left">
		<div class="home-main">
			<div class="home-goodsMsg" style="position: relative;">

				<div class="swiper-container swiper-container-horizontal swiper-container-pro home-goodsMsg-wrap">

					<ul class="swiper-wrapper" style="transition-duration: 0ms; ">
						<li class="swiper-slide swiper-slide-active"
							style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(252, 133, 86); border: 1px solid rgb(244, 114, 56); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">库存预警</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide swiper-slide-next" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(248, 187, 57); border: 1px solid rgb(233, 169, 16); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未发货销货订单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(71, 192, 86); border: 1px solid rgb(46, 177, 60); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核购货订单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(91, 143, 212); border: 1px solid rgb(71, 121, 200); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核购货单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(252, 133, 86); border: 1px solid rgb(244, 114, 56); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核销货订单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide swiper-slide-next" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(248, 187, 57); border: 1px solid rgb(233, 169, 16); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核销货单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(71, 192, 86); border: 1px solid rgb(46, 177, 60); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核收款单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(91, 143, 212); border: 1px solid rgb(71, 121, 200); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核付款单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(252, 133, 86); border: 1px solid rgb(244, 114, 56); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核其他支出单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide swiper-slide-next" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(248, 187, 57); border: 1px solid rgb(233, 169, 16); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核其他收入单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(71, 192, 86); border: 1px solid rgb(46, 177, 60); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核调拨单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(91, 143, 212); border: 1px solid rgb(71, 121, 200); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核资金转账单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(252, 133, 86); border: 1px solid rgb(244, 114, 56); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核其他入库单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide swiper-slide-next" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(248, 187, 57); border: 1px solid rgb(233, 169, 16); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核其他出库单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(71, 192, 86); border: 1px solid rgb(46, 177, 60); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核组装单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(91, 143, 212); border: 1px solid rgb(71, 121, 200); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未审核拆卸单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>
						<li class="swiper-slide" style="width: calc(25% - 20px); margin-right: 20px;">
							<div
								style=" background-color: rgb(252, 133, 86); border: 1px solid rgb(244, 114, 56); width: 100%; display: list-item;height: calc(100% - 2px);">
								<span class="name">未到货购货订单</span>
								<div class="number" data-number="0">0</div>
							</div>
						</li>

					</ul>

				</div>
				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-next-pro"><img
						src="/public/static/admin/css/img/right_icon.png" class="iconss" /></div>
				<div class="swiper-button-prev swiper-button-prev-pro"><img
						src="/public/static/admin/css/img/left_icon.png" class="iconss" /></div>
			</div>
			<div class="home-charts panel">
				<div class="header cf">
					<div class="title left">
						<div class="tab">
							<ul id="tabUl">
								<li data-id="0" class="cur">销货</li>
								<li data-id="1" class="">购货</li>
								<li data-id="2" class="">仓库</li>
							</ul>
						</div>
					</div>
					<div class="search-time left" style="position: relative;">
						<span id="time">近七天</span> <span class="icon-bottom"></span>

						<div class="drop-down-wrap" id="dateBox" style="width: 100px; left: -18px; display: none;">
							<div class="drop-down"><span class="triangle-border"></span><span
									class="triangle-bg"></span>
								<ul>
									<li class="" style="text-align: center" text="近七天">
										<a href="#" target="">近七天</a>
									</li>
									<li class="" style="text-align: center" text="近七周">
										<a href="#" target="">近七周</a>
									</li>
									<li class="" style="text-align: center" text="近七月">
										<a href="#" target="">近七月</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="home_myCharts" id="home_myChartsBox" style="height: 605px;">

					<!-- 销货 -->
					<div class="home_sales" id="charts0" style="width: 100%;height: 100%;">
						<div id="main_sales" style="width: 100%;height:100%;"></div>
					</div>

					<!-- 购货 -->
					<div class="home-purchase cf" id="charts1" style="padding: 0 25px 0 40px;display: none;">
						<div class="purchaseBarwrap">
							<div style="text-align: center; font-weight: bold; margin: 35px 0 14px 0;">购货金额排名</div>
							<div class="purchaseBarLeft">
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index1"> </span>
										<a
											onclick="addPage('/scm/Invpusummarygoods/index.html', 'purchase-report', '采购汇总表（按商品）')">
											<div class="item">
												<div class="name">1003 30年</div>
												<div class="total" style="color: #48BFEA">¥18,076.61</div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index2"> </span>
										<a
											onclick="addPage('/scm/Invpusummarygoods/index.html', 'purchase-report', '采购汇总表（按商品）')">
											<div class="item">
												<div class="name">1002 15年</div>
												<div class="total" style="color: #48BFEA">¥13,330.61</div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index3"> </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index4">4 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index5">5 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
							</div>
							<div class="purchaseBarRight">
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index6">6 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index7">7 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index8">8 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index9">9 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
								<div class="itemWrap">
									<div class="page"></div>
									<div id="ceshi"> <span class="index index10">10 </span>
										<a>
											<div class="item">
												<div class="name"> 暂无商品信息</div>
												<div class="total" style="color: #48BFEA"></div>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div id="purtips" style="font-size: 14px;display: none;">
							<p>商品名称：1003 30年</p>
							<p>购货金额：¥18,076.61</p>
						</div>
					</div>

					<!-- 仓库 -->
					<div class="" id="charts2" style="width: 100%;display: none;">
						<div id="main_store" style="width: 100%;height:100%;"></div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<div class="home-auxiliary-item left">
		<div class="home-notice panel">
			<div>
				<!-- <div style="" -->
				<ul class="home-noticeWrap">
					<!--  -->
					<li class="islink " data-link="/service/service.jsp?newsId=20000000487">1. “野性消费”来袭，老板妙招应对</li>
					<li class="islink " data-link="/service/service.jsp?newsId=20000000482">2. 短短5分钟排查库存不足原因，看到最后我服了！
					</li>
					<li class="islink " data-link="/service/service.jsp?newsId=20000000480">3. 【金蝶云链】助力你不再停产</li>
					<li class="hide">胡艳,欢迎使用</li>
				</ul> <span class="home-sticky"></span>
			</div>
		</div>
		<div class="home-common panel"> <span class="home-common-set icon icon-set"></span>
			<div class="home-title">
				<div class="tab">
					<ul>
						<li id="0" class="cur">常用功能</li>
						<li id="1">关键数据</li>
					</ul>
				</div>
			</div>
			<div class="home-content">
				<div class="home-quick-links" style="display: block;">
					<div>
						<ul class="home-link-items cf">
							<li class="item" data-id="purchase/purchase" onclick="addPage('/scm/invPu/add.html','purchase','购货单')">
								<a title="购货单">
									<div class="icon icon-purchase" style="color: #98d637;"></div>
									<div class="text">购货单</div>
								</a>
							</li>
							<li class="item" data-id="sales/sales" onclick="addPage('/sales/invso/add.html','purchaseinvPu','销货单')">
								<a title="销货单">
									<div class="icon icon-sales" style="color: #ffbf25;"></div>
									<div class="text">销货单</div>
								</a>
							</li>
							<li class="item" data-id="storage/transfers" onclick="addPage('/store/move/add.html','storage','调拨单')">
								<a title="调拨单">
									<div class="icon icon-transfers" style="color: #fe854e;"></div>
									<div class="text">调拨单</div>
								</a>
							</li>
							<li class="item" data-id="money/receipt" onclick="addPage('/money/receipt/add.html','salesOrder','收款单')">
								<a title="收款单">
									<div class="icon icon-money" style="color: #598ad7;"></div>
									<div class="text">收款单</div>
								</a>
							</li>
							<li class="item" data-id="storage/inventory" onclick="addPage('/store/pandian/add.html','storage','盘点')">
								<a title="盘点">
									<div class="icon icon-transfers" style="color: #98d637;"></div>
									<div class="text">盘点</div>
								</a>
							</li>
							<li class="item" data-id="purchase/purchaseView" onclick="addPage('/scm/purchase/index.html','purchase','以销定购')">
								<a title="以销定购">
									<div class="icon icon-purchase" style="color: #fe854e;"></div>
									<div class="text">以销定购</div>
								</a>
							</li>
							<li class="item" data-id="setting/accounts" onclick="addPage('/system/check/index.html','setting','结账/反结账')">
								<a title="结账反结账">
									<div class="icon icon-accounts" style="color: #ffbf25;"></div>
									<div class="text">结账反结账</div>
								</a>
							</li>
							<li class="item" data-id="setting/addedServiceList">
								<a title="增值服务">
									<div class="icon icon-addedServiceList" style="color: #598ad7;"></div>
									<div class="text">增值服务</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="home-key-data" style="display: none;">
					<div>
						<ul class="home-keyData">
							<li data-id="storage/initialBalance">
								<div class="item cf"><span class="left">库存总量：</span> <span class="right">15,926.00</span> </div>
								<div class="item cf"><span class="left">库存成本：</span> <span class="right">3,649,074.74</span> </div>
							</li>
							<li data-id="money/cashBankJournal">
								<div class="item cf"><span class="left">现金：</span> <span class="right">753,641.64</span> </div>
								<div class="item cf"><span class="left">银行存款：</span> <span class="right">-4,165,724.30</span> </div>
							</li>
							<li data-id="sales/contactDebt">
								<div class="item cf"><span class="left">客户欠款：</span> <span class="right">-261,607.00</span> </div>
								<div class="item cf"><span class="left">供应商欠款：</span> <span class="right">264,747.75</span> </div>
							</li>
							<li data-id="sales/salesSummary">
								<div class="item cf"><span class="left">销售收入(本月)：</span> <span class="right">2,625.55</span> </div>
								<div class="item cf"><span class="left">销售毛利(本月)：</span> <span class="right">2,364.93</span> </div>
							</li>
							<li data-id="purchase/puSummary">
								<div class="item cf"><span class="left">采购金额(本月)：</span> <span class="right">875.22</span> </div>
								<div class="item cf"><span class="left">商品种类(本月)：</span><span class="right">2</span></div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function () {
		// 获取中间区域的宽高
		var main_width = $("#home_myChartsBox").width();
		var main_height = $("#home_myChartsBox").height();
		var top_height = $(".home-goodsMsg").height();
		$("#main_store").css({ "width": main_width + "px", "height": main_height + "px" });
		showSalesCharts();  //销货图表
		showStoreCharts();  //仓库图表

		// 点击tab切换
		$("#tabUl>li").on("click", function () {
			var id = $(this).attr('data-id');
			$(this).addClass("cur").siblings().removeClass("cur");
			$("#charts" + id).show().siblings().hide();
		});

		// 鼠标移入日期切换
		$(".search-time").hover(function () {
			$("#dateBox").show();
		}, function () {
			$("#dateBox").hide();
		});
		// 点击选择日期
		$("#dateBox ul li").on("click", function () {
			var dateText = $(this).attr("text");
			$("#time").text(dateText);
			$("#dateBox").hide();
		});


		// 购货列表鼠标移入移出
		$(".purchaseBarwrap .itemWrap").hover(function () {
			var name = $(this).find(".name").text();
			var total = $(this).find(".total").text();

			$("#purtips").html("<p>商品名称：" + name + "</p><p>购货金额：" + total + "</p>")
			$("#purtips").show();
		}, function () {
			$("#purtips").hide();
		});
		// 鼠标在区域内移动获取鼠标位置
		$(".purchaseBarwrap .itemWrap").mousemove(function (e) {
			var xx = e.originalEvent.x || e.originalEvent.lagerX || 0;
			var yy = e.originalEvent.y || e.originalEvent.lagerY || 0;
			$("#purtips").css({ "left": xx + "px", "top": (yy - top_height - 20) + "px" });

		});


		// 右侧（常用功能、关键数据）切换
		$(".home-common .home-title .tab ul li").on("click",function(){
			var index=$(this).attr("id");
			$(this).addClass("cur").siblings().removeClass("cur");
			$(".home-common .home-content>div").eq(index).show().siblings().hide();
		});



	})
</script>

<!-- 轮播切换 -->
<script type="text/javascript">
	var swiper = new Swiper('.swiper-container-pro', {
		pagination: '.swiper-pagination-pro',
		nextButton: '.swiper-button-next-pro',
		prevButton: '.swiper-button-prev-pro',
		slidesPerView: 4,
		paginationClickable: true,
		spaceBetween: 30,
		//	        autoplay: 2000,
		//	        loop: true,
	});

</script>

<!-- 销货图表 -->
<script type="text/javascript">
	function showSalesCharts() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main_sales'));
		var a = [5, 2, 6, 8, 7, 4, 9]
		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '销售对比分析',
				left: 'center',
				top: 20,
				textStyle: {
					color: "#5d5d5d", // 主标题文字的颜色。
					fontSize: 13, // 字体大小
				}
			},
			grid: {
				top: '10%',   // 等价于 y: '16%'
				left: '3%',
				right: '8%',
				bottom: '3%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
					shadowStyle: {
						color: "rgba(124,214,252,0.2)"
					}
				},
				formatter: function (params) {
					// console.log(params) 
					return params[0].axisValue + "<br/>" + params[0].seriesName + "：" + params[0].data + "<br/>" + params[1].seriesName + "：" + params[1].data;
				},
			},
			xAxis:
			{
				data: ['9-20', '9-21', '9-22', '9-23', '9-24', '9-25', '9-26'],
				axisTick: {
					show: false, //隐藏坐标轴的刻度
				},
				axisLine: {
					lineStyle: {
						color: '#e9e9e9',  //坐标轴的颜色
					},
				},
				axisLabel: {
					textStyle: {
						color: '#bdbdbd',  //坐标的字体颜色
					},
				},
			},
			yAxis: {
				splitLine: {
					show: false,  //去掉背景的网格线
				},
				axisLabel: {
					textStyle: {
						color: '#bdbdbd',  //坐标的字体颜色
					},
				},
				axisLine: {
					lineStyle: {
						color: '#e9e9e9',  //坐标轴的颜色
					},
				},
				axisTick: {
					show: false, //隐藏坐标轴的刻度
				},
			},
			series: [
				{
					show: false,
					name: '销售笔数',
					type: 'line',
					yAxisIndex: 0,
					symbol: 'none',
					itemStyle: {
						normal: {
							lineStyle: {
								width: 0,  // 设置线宽
								type: 'dotted'  //'dotted'虚线 'solid'实线
							}
						}
					},
					data: [7, 8, 0, 0, 0, 0, 0],
				},
				{
					name: '销售总额',
					type: 'bar',
					stack: 'Ad',
					barWidth: '35%',
					emphasis: {
						focus: 'series'
					},
					data: [3390, -921, 0, 0, 0, 0, 0],
					label: {
						show: true,
						position: 'top',
						color: '#566575'
					},
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					},
					itemStyle: {
						color: "#7cd2fc"
					},
				},

				{
					name: 'bgColor',
					type: 'bar',
					stack: 'Ad',
					emphasis: {
						focus: 'series'
					},
					data: [1610, 5000, 5000, 5000, 5000, 5000, 5000],
					itemStyle: {
						color: "rgba(0,0,0,0.03)"
					},
				},
			]

		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		myChart.on('click', function (params) {
			console.log(params);
			var date = params.name;
			// 跳转
			addPage("/sales/salessummarygoods/index.html?date=" + date, "sales-report", "销售汇总表（按商品）");
		})
	}
</script>

<!-- 仓库图表 -->
<script type="text/javascript">
	function showStoreCharts() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main_store'));
		// 指定图表的配置项和数据
		var option = {
			title: {
				text: '库存数量分布',
				left: 'center',
				top: 20,
				textStyle: {
					color: "#5d5d5d", // 主标题文字的颜色。
					fontSize: 13, // 字体大小
				}
			},
			tooltip: {
				trigger: 'item',
				formatter: function (params) {
					// console.log(params);
					return params.seriesName + "<br/>" + params.name + "：" + params.value + " (" + params.percent + "%)";
				},
			},
			legend: {
				top: '5%',
				left: 'left',
				orient: 'vertical'
			},
			color: ['#5b8dd5', '#83d67f', '#f7a382', '#ffbf25'],
			series: [
				{
					name: '仓库',
					type: 'pie',
					radius: ['35%', '55%'],
					avoidLabelOverlap: false,
					labelLine: {
						normal: {
							length: 15,     // 指示线宽度
							lineStyle: {
								color: "#595959"    // 指示线颜色  
							}
						},
					},
					label: {
						normal: {
							// 各分区的提示内容
							// params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
							formatter: function (params) {
								return params.name + ":(" + params.percent + "%)";
							},
							textStyle: {            // 提示文字的样式
								color: '#595959',
								fontSize: 14
							}
						}
					},
					data: [
						{ value: 783, name: '花果园', id: '0' },
						{ value: 1802, name: '新世界', id: '1' },
						{ value: 13343, name: '仁怀仓库', id: '2' }
					]
				}
			]

		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		myChart.on('click', function (params) {
			// console.log(params)
			var storeId = params.data.id;
			// 跳转
			addPage("/store/goodsbalance/index.html?storeId=" + storeId, "storage-report", "商品库存余额表");
		});
	}
</script>

{include file="public/footer"/}